<template lang="html">
  <div class="homeList-wrap">
    <group class="title">
      <cell :title="title" is-link :link="link"></cell>
    </group>
    <p class="homeList-describe" v-if="describe">{{describe}}</p>
    <ul class="homeList-box">
      <li class="homeList"  v-for="(data, index) in list" :key="index">
        <router-link :to="{ path: detailRouter, query: {id: data.id} }">
          <div class="img-wrap">
            <img :src="data.coverImg || data.cover" v-if="data.coverImg || data.cover">
          </div>
          <div class="info-wrap">
            <p class="homeList-title">{{data.houseTitle || data.quart || data.projectNmae }}</p>
            <p class="homeList-subDescribe">{{data.address || data.projectAddress}}</p>
          </div>
          <div class="info-button">
            <span class="button-left" v-if="data.rentalPrice || data.minprice">￥{{data.rentalPrice || data.minprice}}/月</span>
            <span class="button-left" v-if="data.rental">￥{{data.rental}}/m²/月</span>
            <span class="button-right" v-if="isApartment">免押</span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { Cell } from 'vux'
export default {
  components: {
    Cell
  },
  created () {
    console.log(this)
  },
  props: {
    link: { // 房源列表路由
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    describe: { // 描述
      type: String,
      default: ''
    },
    list: { // 房源
      type: Array,
      required: true
    },
    detailRouter: { // 详情跳转路由
      type: String,
      required: true
    },
    isApartment: { // 是否是公租房
      type: Boolean,
      required: false
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/baseVar.less";
  .homeList-wrap{
    height: 270px;
    padding: 0 15px;
    background: #fff;
    box-sizing: border-box;
    overflow-y: hidden;
    &+.homeList-wrap{
      margin-top: 8px;
    }
    ul,li{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .homeList-box{
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-right: -15px;
      margin-left: -5px;
      padding: 5px;
      padding-bottom: 22px;
      box-sizing: border-box;
      &::-webkit-scrollbar-thumb:horizontal{
        background: transparent;
      }
    }
    .title{
      padding-top: 10px;
    }
    .homeList-describe{
      font-size: @font-size-13;
      color: #a3a3a3;
      margin-bottom: 10px;
    }
    .homeList{
      flex-shrink: 0;
      width: 160px;
      /*height: 158px;*/
      border-radius: 5px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
      &+.homeList{
        margin-left: 8px;
      }
      .img-wrap{
        width: 100%;
        height: 104px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .info-wrap{
        padding: 10px 10px 0;
        p{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          box-sizing: border-box;
        }
      }
      .info-button {
        padding: 0 10px 0;
        display: flex;
        .button-left {
          flex:2;
          line-height: 30px;
          font-size: @font-size-15;
          color: #585858;
          flex: 2;
        }
        .button-right {
          flex: 1;
          display: inline-block;
          width: 36px;
          height: 16px;
          line-height: 16px;
          margin-top: 8px;
          border-radius: 2px;
          background-color: #dea34c;
          text-align: center;
          color: #fff;
          font-size: @font-size-12;
        }
      }
      .homeList-title{
        color: #000;
        font-size: 14px;
      }
      .homeList-subDescribe{
        font-size: 11px;
        color: #8d8d8d;
      }
    }
  }
</style>
<style lang="less">
  .homeList-wrap{
    .weui-cells{
      margin-top: 0;
      font-size: 20px;
      color: #585858;
      &:before, &:after{
        border: none;
      }
      .weui-cell_access:active{
        background-color: transparent;
      }
    }
    .weui-cell{
      padding: 0;
    }
  }
</style>
